<template>
    <div style="background-color: white">
        <div style="margin-bottom: 4px">
            <a-select style="width: 200px" placeholder="点击选择工地查询" @change="handleChange">
                <a-select-option v-for="(item,index) in buildingSites" :key="index">
                    {{ item }}
                </a-select-option>
            </a-select>

        </div>
        <div class="map" id="map"></div>

    </div>
</template>

<script>

import {METHOD, request} from "@/utils/request";
import AMapLoader from "@amap/amap-jsapi-loader";
import dayjs from "dayjs";

export default {
    data() {
        return {
            userId: "",
            buildingSites: [],
            points: [],
            AMap: null,
            map: null,
            form: this.$form.createForm(this, {name: 'dynamic_rule'}),
            machineTypes: [
                '挖掘机',
                '推土机'
            ]
        }
    },
    mounted() {
        this.userId = JSON.parse(localStorage.getItem(process.env.VUE_APP_USER_KEY)).id;
        this.getBuildingSites()
        this.initMap()
    },
    methods: {
        initMap() {
            AMapLoader.load({
                key: "e6ae3ad4789b73879baf6e3a442b7781",             // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ['AMap.DistrictSearch']      // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                this.AMap = AMap;
                this.map = new AMap.Map('map', {
                    zoom: 15,                //设置当前显示级别
                    expandZoomRange: true,    //开启显示范围设置
                    zooms: [7, 20],          //最小显示级别为7，最大显示级别为20
                    viewMode: '3D',          //这里特别注意，设置为3D则其它地区不显示
                    zoomEnable: true,        //是否可以缩放地图
                    resizeEnable: true,
                    // mapStyle: "amap://styles/db9efe6a1745ac24b7269b862f359536"
                    // mapStyle: 'amap://styles/darkblue', // 自定义地图样式
                });
            })
        },
        handleChange(index) {
            console.log(index);
            this.getLabels(this.buildingSites[index])
        },
        getLabels(buildingSite) {
            request("/label/getlabelByuid", METHOD.GET, {
                userid: this.userId,
                gdname: buildingSite
            }).then(res => {
                if (res.data.code === 1) {
                    this.points = res.data.data
                    // 清除地图
                    this.map.clearMap()
                    this.points.forEach(item => {
                        if (item.lon !== null && item.lau !== null) {
                            let marker = new this.AMap.Marker({
                                position: [item.lon, item.lau],
                            })
                            marker.content = `<div>
                        <p>环保码：${item.hbm}</p>
                        <p>工地名：${item.gdname}</p>
                        <p>机械类型：${item.jxlx}</p>
                        <p>机械所有人：${item.jxsyr}</p>
                        <p>电话：${item.phone}</p>
                        <p>添加时间：${dayjs(item.addtime * 1000).format("YYYY-MM-DD HH:mm:ss")}</p>
                        </div>`
                            this.map.add(marker)
                            marker.on('click', this.markerClick);
                        }
                    })

                    this.map.setFitView()
                } else {
                    this.$message.error(res.data.msg)
                }
            })
        },
        markerClick(e) {
            console.log("test")
            // 如果没有和当前点击的点位置重复的点，就直接显示信息弹窗
            const infoWindow = new this.AMap.InfoWindow({
                offset: new this.AMap.Pixel(0, -30)
            });

            infoWindow.setContent(e.target.content);
            infoWindow.open(this.map, e.target.getPosition());
        },
        getBuildingSites() {
            request("/label/getgdlist", METHOD.GET, {
                userid: this.userId
            }).then(res => {
                console.log(res)
                this.buildingSites = res.data.data
            })
        },
    }
}
</script>

<style scoped>
.map {
    height: 100%;
    width: 100%;
}
</style>